<template>
  <div class="pdf-viewer-container">
    <!-- PDF内容区域 -->
    <div class="pdf-content">
      <!-- 加载状态 -->
      <div v-if="loading" v-loading="loading" class="loading-state">
        正在加载PDF...
      </div>

      <!-- PDF预览 -->
      <div v-else-if="pdfUrl" class="pdf-preview">
        <iframe
          :src="pdfUrl"
          class="pdf-iframe"
          frameborder="0"
          allowfullscreen
        ></iframe>
      </div>

      <!-- 空状态 -->
      <div v-else class="empty-state">
        <el-icon size="80" class="empty-icon"><Document /></el-icon>
        <p class="empty-text">PDF文档加载失败</p>
        <p class="empty-hint">请检查文档ID是否正确</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch } from "vue";
import { ElMessage } from "element-plus";
import { useRoute } from "vue-router";
import { getFilePrefix } from "../../../api/env";
import { postDownloadFileFromFileServer } from "../../../api/http";
import { createFileWithBinaryContent } from "../../../util/fileUtils";

const route = useRoute();
const fileUrlQuery = ref("");
if (route.query.fileUrl) {
  fileUrlQuery.value = route.query.fileUrl as string;
}
// 定义Props
interface Props {
  pdfId?: string | number;
  pdfInfo?: {
    name: string;
    size: number;
  };
}

const props = withDefaults(defineProps<Props>(), {
  pdfId: "",
  pdfInfo: undefined,
});

// 响应式数据
const loading = ref(false);
const pdfUrl = ref<string>("");

// 文件大小格式化
const formatFileSize = (bytes: number): string => {
  if (bytes === 0) return "0 B";
  const k = 1024;
  const sizes = ["B", "KB", "MB", "GB"];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
};

// 加载PDF
const loadPDF = async (pdfId: string | number) => {
  // if (!pdfId) {
  //   ElMessage.error("PDF ID不能为空");
  //   return;
  // }

  try {
    loading.value = true;

    if (fileUrlQuery.value) {
      // 构建本地文件路径
      postDownloadFileFromFileServer(fileUrlQuery.value, {}).then((res) => {
        const file = createFileWithBinaryContent("test.pdf", res.data, "application/pdf");
        pdfUrl.value = URL.createObjectURL(file);
        ElMessage.success("PDF加载成功");
      });
      
    }
  } catch (error: any) {
    console.error("PDF加载失败:", error);
    ElMessage.error("PDF加载失败，请检查文档ID");
    pdfUrl.value = "";
  } finally {
    loading.value = false;
  }
};

// 监听pdfId变化
watch(
  () => props.pdfId,
  (newPdfId) => {
    if (newPdfId) {
      loadPDF(newPdfId);
    } else {
      pdfUrl.value = "";
    }
  },
  { immediate: true }
);

// 生命周期
onMounted(() => {
  // 组件挂载时加载PDF
  if (props.pdfId) {
    loadPDF(props.pdfId);
  }
  loadPDF("");
});

onUnmounted(() => {
  // 清理资源
  if (pdfUrl.value && pdfUrl.value.startsWith('blob:')) {
    URL.revokeObjectURL(pdfUrl.value);
  }
  pdfUrl.value = "";
});
</script>

<style scoped>
.pdf-viewer-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #f5f5f5;
}

.pdf-content {
  flex: 1;
  position: relative;
  background: #f5f5f5;
}

.loading-state {
  height: 100%;
  position: relative;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #909399;
}

.empty-icon {
  margin-bottom: 16px;
  color: #c0c4cc;
}

.empty-text {
  font-size: 16px;
  margin-bottom: 8px;
}

.empty-hint {
  font-size: 14px;
  color: #c0c4cc;
}

.pdf-preview {
  height: 100%;
  width: 100%;
}

.pdf-iframe {
  width: 100%;
  height: 100%;
  border: none;
  background: white;
}
</style>
